import React, { useEffect, useState } from "react";
import axios from "axios";
import { ActiveItem } from '../../components'
import { Row, Col } from 'antd'
interface ActiveItemState {
  title: string;
  curtDownTime: number;
  list: { nickname: string; avator: string; count: string }[];
}

export const Active = () => {
  const [list, setList] = useState<ActiveItemState[]>([]);

  useEffect(() => {
    const fetchList = async () => {
      const resp = await axios.get("/api/active");
      setList(resp.data.data);
    };
    fetchList();
  }, []);

  return <div>
		<Row>
			{
				list.map((v, i) => {
					return <Col span={8} key={i} style={{ padding: 10, margin: '10 0' }}>
						<ActiveItem
							title={v.title}
							curtDownTime={ v.curtDownTime }
							list={v.list}
						></ActiveItem>
					</Col>
				})
			}
		</Row>
	</div>;
};
